<script setup>
import SvgIcon from '@/components/SvgIcon/index.vue'
import useSettingsStore from '@/store/modules/settings.js'

const isAnimating = ref(false)
const settingsStore = useSettingsStore()

function handleClick() {
  settingsStore.reloadPage()
  isAnimating.value = true
  setTimeout(() => {
    isAnimating.value = false
  }, 1000)
}
</script>

<template>
  <div @click="handleClick">
    <SvgIcon name="iconoir:refresh-double" :class="{ animation: isAnimating }" class="text-base"/>
  </div>
</template>

<style lang="scss" scoped>
.animation {
  animation: animation 1s;
}

@keyframes animation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>
